<template>
    <div class="layout">
        <Header></Header>
        <div class="content">
            <el-row>
                <el-col :span="4">
                    <div class="left-menu">
                        <div class="box logo tc">
                            <img src="@/assets/images/company.png" alt="公司logo">
                            <p class="title">深圳辰尔科技有限公司</p>
                        </div>
                        <div class="box label">
                            <p class="title">固定资产&电子标签</p>
                            <ul class="menu">
                                <li>
                                    <i class="check-assets" :class="{ active: isActive === 'checkAssets' }"></i>
                                    <router-link tag="a" to='/layout/checkAssets'
                                                 @click.native="isActive = 'checkAssets'">
                                        查看固定资产
                                    </router-link>
                                </li>
                                <li>
                                    <i class="check-label" :class="{ active: isActive === 'checkLabel' }"></i>
                                    <router-link tag="a" to='/layout/checkLabel'
                                                 @click.native="isActive = 'checkLabel'">查看电子标签
                                    </router-link>
                                </li>
                                <li>
                                    <i class="add-assets" :class="{ active: isActive === 'addAssets' }"></i>
                                    <router-link tag="a" to='/layout/addAssets' @click.native="isActive = 'addAssets'">
                                        新增固定资产
                                    </router-link>
                                </li>
                                <li>
                                    <i class="add-label" :class="{ active: isActive === 'addLabel' }"></i>
                                    <router-link tag="a" to='/layout/addLabel' @click.native="isActive = 'addLabel'">
                                        新增电子标签
                                    </router-link>
                                </li>
                            </ul>
                        </div>
                        <div class="box reader">
                            <p class="title">区域&阅读器</p>
                            <ul class="menu">
                                <li>
                                    <i class="check-area" :class="{ active: isActive === 'checkArea' }"></i>
                                    <router-link tag="a" to='/layout/checkArea' @click.native="isActive = 'checkArea'">
                                        查看区域
                                    </router-link>
                                </li>
                                <li>
                                    <i class="check-reader" :class="{ active: isActive === 'checkReader' }"></i>
                                    <router-link tag="a" to='/layout/checkReader'
                                                 @click.native="isActive = 'checkReader'">查看阅读器
                                    </router-link>
                                </li>
                                <li>
                                    <i class="place-area" :class="{ active: isActive === 'placeArea' }"></i>
                                    <router-link tag="a" to='/layout/placeArea' @click.native="isActive = 'placeArea'">
                                        布置区域
                                    </router-link>
                                </li>
                                <li>
                                    <i class="place-reader" :class="{ active: isActive === 'placeReader' }"></i>
                                    <router-link tag="a" to='/layout/placeReader'
                                                 @click.native="isActive = 'placeReader'">布置阅读器
                                    </router-link>
                                </li>
                            </ul>
                        </div>
                    </div>
                </el-col>
                <el-col :span="20">
                    <div class="right-content">
                        <router-view></router-view>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import Header from '@/components/header'

    export default {
        name: "layout",
        data() {
            return {
                isActive: ''
            }
        },
        components: {
            Header
        },
        methods: {
            //控制图标
            controlActive() {
                let router = this.$route.path
                switch (router) {
                    case '/layout/checkAssets':
                        this.isActive = 'checkAssets'
                        break
                    case '/layout/checkLabel':
                        this.isActive = 'checkLabel'
                        break
                    case '/layout/addAssets':
                        this.isActive = 'addAssets'
                        break
                    case '/layout/addLabel':
                        this.isActive = 'addLabel'
                        break
                    case '/layout/checkArea':
                        this.isActive = 'checkArea'
                        break
                    case '/layout/checkReader':
                        this.isActive = 'checkReader'
                        break
                    case '/layout/placeArea':
                        this.isActive = 'placeArea'
                        break
                    case '/layout/placeReader':
                        this.isActive = 'placeReader'
                        break
                    default:
                        this.isActive = ''
                }
            }
        },
        mounted() {
            this.controlActive()
        },
        watch: {
            "$route": "controlActive"
        }
    }
</script>

<style lang="scss" type="text/scss" scoped>
    @import "../../assets/css/color";

    .layout {
        height: 100vh;
        .content {
            height: 90vh;
            .left-menu {
                height: 90vh;
                background: $bg_black;
                .box {
                    padding: 0.2rem;
                    box-sizing: border-box;
                    .title {
                        font-size: 0.2rem;
                        padding-left: 0.3rem;
                        border-bottom: 1px solid $black;
                        padding-bottom: 0.2rem;
                    }
                    .menu {
                        padding-top: 0.1rem;
                        li {
                            height: 0.5rem;
                            line-height: 0.5rem;
                            padding-left: 0.3rem;
                            a {
                                font-size: 0.2rem;
                                color: $ph_color;
                                padding-left: 0.1rem;
                            }
                            .router-link-active {
                                color: $strong_red;
                            }
                            i {
                                padding: 10px;
                                padding-left: 13px;
                                background: url("../../assets/images/spirit.png") no-repeat 0 -194px;
                                &.check-assets {
                                    &.active {
                                        background-position: 0 -244px;
                                    }
                                }
                                &.check-label {
                                    background-position: -50px -194px;
                                    &.active {
                                        background-position: -50px -244px;
                                    }
                                }
                                &.add-assets {
                                    background-position: -100px -194px;
                                    &.active {
                                        background-position: -100px -244px;
                                    }
                                }
                                &.add-label {
                                    background-position: -150px -194px;
                                    &.active {
                                        background-position: -150px -244px;
                                    }
                                }
                                &.check-area {
                                    background-position: -200px -194px;
                                    &.active {
                                        background-position: -200px -244px;
                                    }
                                }
                                &.check-reader {
                                    background-position: -250px -194px;
                                    &.active {
                                        background-position: -250px -244px;
                                    }
                                }
                                &.place-area {
                                    background-position: -300px -194px;
                                    &.active {
                                        background-position: -300px -244px;
                                    }
                                }
                                &.place-reader {
                                    background-position: -350px -194px;
                                    &.active {
                                        background-position: -350px -244px;
                                    }
                                }
                            }
                        }
                    }
                    &.logo {
                        height: 25%;
                        .title {
                            padding: 0.1rem 0 0 0;
                            border: 0;
                            color: $ph_color;
                        }
                        img {
                            width: 1.3rem;
                        }
                    }
                    &.label {
                        height: 35%;
                        padding: 0.2rem 0;
                    }
                    &.reader {
                        height: 40%;
                        padding: 0.2rem 0;
                    }
                }
            }
            .right-content {
                height: 90vh;
            }
        }
    }
</style>
